<template>
  <div class="chartdom">
    <h2>用户趋势图</h2>
    <div ref="chart" class="chart-container" :options="options"></div>
    <button class="downloadChart" @click="downloadChart">下载图表</button>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    // 图表宽度
    width: {
      type: String,
      default: "100%",
    },
    // 图表高度
    height: {
      type: String,
      default: "400px",
    },
    // 图表标题
    title: {
      type: String,
      default: "折线图示例",
    },
    // X 轴数据
    xAxisData: {
      type: Array,
      required: true,
    },
    // Y 轴数据

    // 系列名称
    seriesName: {
      type: String,
      default: "销量",
    },
    options: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      this.chart.setOption(this.options);
    },
    downloadChart() {
      const image = this.chart.getDataURL({
        pixelRatio: 2,
        backgroundColor: "#fff",
      });
      const link = document.createElement("a");
      link.href = image;
      link.download = "用户趋势图.png";
      link.click();
    },
  },
};
</script>

<style scoped>
.chartdom {
  width: 95%;
  position: relative;
}
h2 {
  text-align: center;
  color: #333;
  font-size: 24px;
  margin-bottom: 20px;
}
.chart-container {
  width: 100%;
  height: 400px;
}
button {
  display: block;
  background-color: #369f6e;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  position: absolute;
  top: 10px;
  right: 0px;
}
</style>